<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>滑动菜单</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body {
      font-size: 14px
    }
    #scrollMenu {
      width: 500px;
      border: 2px #ccc solid;
      height: 40px;
      margin: 20px;
      overflow: hidden;
    }
    ul li {
      display: inline-block;
      list-style: none;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    ul {
      margin-left: -20px;
    }
  </style>
</head>
<body>
  <div id="scrollMenu">
    <ul>
    </ul>
  </div>
</body>
<script>
  function ScrollMenu(obj) {
    var scrollDom = document.getElementById(obj.id);
    var scrollW = scrollDom.clientWidth;
    var scrollLi = scrollW / (obj.column);
    var scrollUl = scrollDom.children[0];
    scrollUl.style.marginLeft = "0px";
    scrollUl.style.transition = "all .2s linear"
    scrollUl.style.position = 'relative'
    scrollUl.style.width = `${(obj.menuList.length) * scrollLi}px`
    this.height = obj.height || document.getElementById(obj.id).clientHeight;
    /**
     * 创建底部边框
     */ 
    var botDom = document.createElement('div');
    botDom.style.width = `${scrollLi}px`;
    botDom.style.height = '2px';
    botDom.style.background = 'red'
    botDom.style.position = 'absolute'
    botDom.style.bottom = '4px'
    botDom.style.zIndex = '99'
    botDom.style.left = 0;
    botDom.style.transition = "all .3s ease";
    scrollUl.appendChild(botDom)
    /**
     * 遍历菜单
     */
    obj.menuList.forEach((val, index) => {
      var newLi = document.createElement('li');
      newLi.id = index;
      newLi.innerHTML = val;
      newLi.style.width = `${scrollLi}px`;
      scrollUl.appendChild(newLi)
    })
    /**
     * 监听li
     */
    var startX, moveX;
    var scrollL = scrollLi * (obj.menuList.length) - scrollW;
    console.log(scrollUl.clientLeft)
    var move = function(event) {
      moveX = event.pageX;
      console.log(moveX - startX)
      var scrollW = parseInt(scrollUl.style.marginLeft);
      console.log("当前居左" + scrollW)
      console.log('移动位移' + (moveX - startX))
      scrollUl.style.marginLeft = `${scrollW + moveX - startX}px`
      if (parseInt(scrollUl.style.marginLeft) >=0) {
        scrollUl.style.marginLeft = 0
      } else if (parseInt(scrollUl.style.marginLeft) <= -scrollL) {
        scrollUl.style.marginLeft = `-${scrollL}px`
      }
    }

    scrollUl.addEventListener('mousedown', function(event){
      startX = event.pageX;
      scrollUl.addEventListener('mousemove', move)
    })
    scrollUl.addEventListener('mouseout', function(event){
      scrollUl.removeEventListener('mousemove', move)
    })
    document.documentElement.addEventListener('mouseup', function(){
      scrollUl.removeEventListener('mousemove', move)
    })
    scrollUl.addEventListener('click', function(event){
      var _index = event.target.id;
      if (event.target.nodeName.toLowerCase() != 'li') return
      /**
       * 点击一个li时底部边框会位移
       */ 
      botDom.style.left = `${_index * scrollLi}px`; 
      if (_index >= (obj.column - 1)) {
        if (_index == (obj.menuList.length - 1)) return;
        scrollUl.style.marginLeft = `-${scrollLi * (_index - 2)}px`
      } else {
      //  scrollUl.style.marginLeft = `0px`
      }
    })
  }
  window.onload = function() {
    var menuList = ['新闻', '娱乐', '体育', '社会', '头条', '汽车', '房地产']
    new ScrollMenu({
      id: 'scrollMenu',
      menuList,
      column: 4,
      currentIndex: function(index) {

      }
    })
  }
</script>
</html>